<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  text-align: center;
			  background: #222;
			}
			
			.reveal {
			  position: relative;
			  display: flex;
			  color: #6ee1f5;
			  font-size: 2em;
			  font-family: Raleway, sans-serif;
			  letter-spacing: 3px;
			  text-transform: uppercase;
			  white-space: pre;
			}
			.reveal span {
			  opacity: 0;
			  transform: scale(0);
			  animation: fadeIn 2.4s forwards;
			}
			.reveal::before, .reveal::after {
			  position: absolute;
			  content: "";
			  top: 0;
			  bottom: 0;
			  width: 2px;
			  height: 100%;
			  background: white;
			  opacity: 0;
			  transform: scale(0);
			}
			.reveal::before {
			  left: 50%;
			  animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
			}
			.reveal::after {
			  right: 50%;
			  animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
			}
			
			@keyframes fadeIn {
			  to {
			    opacity: 1;
			    transform: scale(1);
			  }
			}
			@keyframes slideLeft {
			  to {
			    left: -6%;
			    opacity: 1;
			    transform: scale(0.9);
			  }
			}
			@keyframes slideRight {
			  to {
			    right: -6%;
			    opacity: 1;
			    transform: scale(0.9);
			  }
			}
		</style>
	</head>
	<body>
		<div class="reveal">
			不能用语言准确表达的东西，最好完全不说。
            ——村上春树 ​​​​
        </div>
	</body>
</html>
<script>
	"use strict";
	let duration = 0.8;
	let delay = 0.3;
	let revealText = document.querySelector(".reveal");
	let letters = revealText.textContent.split("");
	revealText.textContent = "";
	let middle = letters.filter(e => e !== " ").length / 2;
	letters.forEach((letter, i) => {
	    let span = document.createElement("span");
	    span.textContent = letter;
	    span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
	    revealText.append(span);
	});

</script>
